<template>
  <div class="wrap">
    <div class="timeline-outer">
      <a-timeline mode="right">
        <a-timeline-item>
          <template #dot>
             <a-button type="primary">模拟用户1</a-button>
          </template>
        </a-timeline-item>
        <a-timeline-item color="#1890ff">
          至今
          <div class="timeline-item-right">点击查看当时频谱</div>
        </a-timeline-item>
        <a-timeline-item color="rgb(52, 240, 52)">
          2018-01-11 Thu
          <div class="timeline-item-right timeline-tooltip">sat1L-3965.12 第二次发现</div>
        </a-timeline-item>
        <a-timeline-item color="rgb(52, 240, 52)">
          2017-12-11 Wed
          <div class="timeline-item-right timeline-tooltip">sat4R-3838.0 发现用户</div>
        </a-timeline-item>
        <a-timeline-item color="rgb(52, 240, 52)">
          2017-11-01 Wed
          <div class="timeline-item-right timeline-tooltip">sat2R-3800.89 首次发现此用户</div>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <a-button shape="round">Past</a-button>
          </template>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script lang="ts" setup>


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  width: 50%;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-item-right {
    min-width: 180px;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: -32px;
    text-align: left;
    transform: translateX(100%);
}
.timeline-outer {
  position: relative;
  width: 100px;
}
.timeline-tooltip {
  padding: 6px 10px;
  border: 1px solid #eee;
  border-radius: 2px;
  transform: translateX(100%) translateY(-6px);
}
.timeline-tooltip::after {
  content: "";
  display: block;
  position: absolute;
  left: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #ccc;
  transform: translateY(-50%) rotateZ(45deg);
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: linear-gradient(45deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
}
</style>
<style>
.timeline-outer .ant-timeline-item:first-child {
  padding-bottom: 70px !important;
}
.timeline-outer .ant-timeline-item {
  padding-bottom: 30px !important;
}
.timeline-outer .ant-timeline-item-tail {
  border-left: 4px solid rgb(52, 240, 52);
  left: calc(100% - 4px - 2.5px) !important;
  margin: 4px 0 !important;
  height: calc(100% - 18px) !important;
}
.timeline-outer .ant-timeline-item:first-child .ant-timeline-item-tail {
  border-color: #1890ff;
}
.timeline-outer .ant-timeline-item:nth-child(2) .ant-timeline-item-tail {
  border-image: linear-gradient(to bottom, #1890ff 0%,#1890ff 40%, rgb(52, 240, 52) 60%, rgb(52, 240, 52) 100%) 1;
}
.timeline-outer .ant-timeline-item-head {
  border-width: 4px;
}
</style>
